<template>
    <div id="Find_new">

        <div id="myDiscuss">
            <div class="comment">
                <div v-for="($,index) in comment_data" class="myContent">
                    <div class="myCt1">
                        <div class="myId">
                            <div class='myIdPic'><img class="myIdImg" src="../assets/images/find/myFace.png"></div>
                            <div class="myName"><b>{{$.name}}</b></div>
                        </div>
                        <div class="myThink">
                            <div class="myText" v-html="$.content"></div><br>
                        </div>
                    </div>
                    <div class="myCt2 ">
                        <div class="imgPos clearfix">
                            <div class='myStylePic' v-for="$$ in $.img"><img class="myStyleImg" :src="$$"></div>
                        </div>
                    </div>
                    <div class="myCt3 clearfix">
                        <!--<a class='myCollect'>
                            <Icon type="android-walk" style="display: inline; margin-right:20px;"></Icon>发现
                        </a>-->
                        <a class='myCollect'>
                            <Icon type="share" style="display: inline; margin-right:20px;" />收藏
                        </a>
                        <a class='myCollect' @click="openModal($,index)">
                            <Icon type="ios-chatbubble-outline" style="display: inline; margin-right:20px;"></Icon>评论
                        </a>
                        <Badge :count="$.like" overflow-count="99999">
                            <a :class='["myCollect","demo-badge",{"badge_visited":badge_visited[index]}]' @click="my_like(index,$._id,$.like)">
                                <Icon type="ios-heart-outline" style="display: inline; margin-right:20px;" /> 点赞
                            </a>
                        </Badge>
                    </div>
                </div>

                <el-pagination v-show="find_comment_bool" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size="currentSize" layout="prev, pager, next, jumper" :total="100">
                </el-pagination>

            </div>
        </div>

        <Modal v-model="modal" :title="modalMessagee.name" @on-cancel="cancel">
            {{modalMessagee.content}}
            <div slot="footer">
                <Card style="width:100%" v-for="discuss in modalMessagee.discuss">
                    <div style="text-align:center">
                        <h3 style="text-align: left;">{{discuss.name}}：</h3>
                        <h3 style="text-align: left;text-indent:30px">{{discuss.data}}</h3>
                    </div>
                </Card>

                <Input v-model="replyValue" @on-enter="Reply">
                <span slot="prepend">评论</span>
                <span slot="append"><Icon type="ios-undo-outline"></Icon></span>
                </Input>
            </div>
        </Modal>

    </div>
</template>
<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import axios from 'axios'
    export default {
        data() {
            return {
                badge_visited: [],
                modal: false,
                modalMessagee: {},
                replyValue: ""
            }
        },
        methods: {
            my_like(index, _id, like) {
                //console.log("my_like")
                this.badge_visited[index] = this.$set(this.badge_visited, index, !this.badge_visited[index]);
                axios.post('/users/find/changeLike', {
                        _id: _id,
                        bool: this.badge_visited[index]
                    })
                    .then((res) => {
                        //console.log(res)
                        this.update_comment();
                    })
                    .catch(
                        function (err) {
                            console.log(err);
                        })
            },
            openModal(data, index) {
                this.modal = true;
                this.modalMessagee._id = data._id;
                this.modalMessagee.index = index;
                this.modalMessagee.myName = data.name;
                this.modalMessagee.name = "评论： @ " + data.name;
                this.modalMessagee.content = data.content;
                this.modalMessagee.discuss = data.discuss;
                //console.log(data.discuss);
            },
            Reply() {
                if (this.replyValue) {
                    axios.post('/users/find/addReply', {
                            _id: this.modalMessagee._id,
                            name: this.modalMessagee.myName,
                            data: this.replyValue
                        })
                        .then((res) => {
                            this.update_comment();
                            console.log(res)
                            setTimeout(() => {
                                this.comment_data[this.modalMessagee.index].discuss = this.$set(this.comment_data[
                                        this.modalMessagee.index].discuss, res.data[0].discuss.length -
                                    1, res.data[0].discuss)
                                //console.log(res.data.discuss)
                            }, 1000);
                            this.replyValue = "";
                        })
                        .catch(
                            function (err) {
                                console.log(err);
                            })
                } else {
                    this.$Notice.open({
                        title: '操作提示',
                        desc: '请输入文本后再发布'
                    });
                }
            },
            cancel() {
                this.$Message.info('关闭评论');
            },
            ...mapMutations([
                'update_comment'
            ]),
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.update_comment({
                    page: val
                })
            }
        },
        computed: {
            ...mapState({
                comment_data: state => state.comment_data,
                currentPage: state => state.currentPage,
                currentSize: state => state.currentSize,
                find_comment_bool: state => state.find_comment_bool
            })
        },
        mounted() {
            this.comment_data ? false : this.update_comment({
                page: 1,
                size: 5
            })
        }
    }
</script>
<style scoped>
    .demo-badge {
        width: 42px;
        height: 42px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }


    #myDiscuss {
        float: right;
        width: 650px;
        /*background: mediumspringgreen;*/
    }

    .comment {
        width: 100%;
        position: relative;
        /*background: lightcoral;*/
    }

    .myContent {
        position: relative;
        margin: 50px 30px;
        margin-bottom: 40px;
        width: 580px;
        border-top: 2px #EFEFEF solid;
        padding-top: 50px;
        /*background: red;*/
    }

    .myCt1 {
        position: relative;
        width: 100%;
        /*background: lightskyblue;*/
    }

    .myId {
        position: relative;
        clear: both;
    }

    .myIdPic {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        overflow: hidden;
        position: relative;
    }

    .myName {
        position: absolute;
        left: 70px;
        top: 15px;
        font-size: 28px;
    }

    .myIdImg {
        width: 100%;
        height: 100%;
    }

    .myThink {
        width: 100%;
        /*background: mediumspringgreen;*/
    }

    .myText {
        margin-left: 70px;
    }

    .myCt2 {
        position: relative;
        width: 100%;
        /*background: darkslateblue;*/
    }

    .imgPos {
        margin-left: 70px;
        position: relative;
    }

    .myStylePic {
        width: 140px;
        height: 140px;
        position: relative;
        margin: 0px 10px 20px 10px;
        float: left;
        cursor: pointer;
    }

    .myStyleImg {
        width: 100%;
        height: 100%;
    }

    .myCollect {
        width: 190px;
        height: 41px;
        position: relative;
        float: left;
        cursor: pointer;
        border: 1px solid #ccc;
        padding-top: 12px;
        text-indent: 60px;
        background: #FAFAFA;
        font-size: 15px;
    }

    .badge_visited {
        color: red;
    }

    .el-pagination {
        white-space: nowrap;
        padding: 2px 100px;
        color: #48576a;
    }
</style>